<template>
	<view class="t-address">
		<view class="t-address-title">
			<view>当前城市</view>
			<view class="t-address-title-select">
				<picker mode="selector" @change="provinceChange" :value="index" range-key="name" :range="provinceList">
					<view class="uni-input">选择省份</view>
				</picker>
			</view>
		</view>
		<view class="t-address-text">{{ currentCity.name + '，' + currentProvince.name }}</view>
		<view class="t-address-title">选择城市</view>
		<view class="t-address-btns">
			<view v-for="item in cityList" :key="item.id" @click="handleSelect(item)" :class="['t-address-btns-item', currentCity.id === item.id ? 't-address-btns-select' : '']">
				{{ item.name }}
			</view>
		</view>
	</view>
</template>

<script>
	import airport from './airport.js'

	export default {
		data() {
			return {
				cityList: [],
				provinceList: [],
				mobileConfig: {},
				currentCity: {},
				currentProvince: {},
			}
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData() {
				const provinceList = uni.getStorageSync("provinceList");
				this.provinceList = provinceList;
				// 筛选当前城市
				const mobileConfig = uni.getStorageSync("mobileConfig");
				this.mobileConfig = mobileConfig;
				this.getCityList(mobileConfig.indexDefaultProvince, mobileConfig.indexDefaultCity);
			},
			/** 获取市信息 */
			getCityList(provinceId, cityId) {
				//发起网络请求
				this.$http.get({
					url: this.$apis.getAddressList,
					data: {
						parentId: provinceId
					},
					noAuth: true,
				}).then(res => {
					if (res.code === 200) {
						this.cityList = res.data;
						// 初始化定位显示
						if (cityId) {
							const city = this.cityList.filter(x => x.id == cityId);
							this.currentCity = city[0];
							// 读取省份
							const prvArr = this.provinceList.filter(x => x.id == this.mobileConfig.indexDefaultProvince);
							// 判断是否匹配到
							if (prvArr && prvArr.length > 0) {
								this.currentProvince = prvArr[0];
							}
						} else {
							this.currentCity = this.cityList[0];
						}
					}
				}).catch(err => {
					console.log('调用接口失败：', err);
				});
			},
			handleSelect(row) {
				this.currentCity = row;
				// 设置省市配置
				const mobileConfig = uni.getStorageSync("mobileConfig");
				mobileConfig.indexDefaultProvince = this.currentProvince.id;
				mobileConfig.indexDefaultCity = this.currentCity.id;
				uni.setStorageSync("mobileConfig", mobileConfig);
				// 返回
				uni.navigateBack();
			},
			/** 切换省份触发 */
			provinceChange(target) {
				const province = this.provinceList[target.detail.value];
				this.currentProvince = province;
				this.getCityList(province.id);
			}
		}
	}
</script>

<style lang="scss">
	.t-address {
		
		&-title {
			padding: 20rpx;
			background-color: #e4ebe5;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			&-select {
				color: #4FC48F;
				font-size: 24rpx;
				font-weight: 600;
			}
		}
		
		&-text {
			padding: 20rpx;
			font-size: 28rpx;
			font-weight: 600;
		}
		
		&-btns {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
			
			&-item {
				width: 100rpx;
				padding: 10rpx;
				border: 1px solid #999999;
				margin: 0 20rpx 20rpx 0;
				font-size: 28rpx;
				text-align: center;
				border-radius: 20rpx;
			}
			
			&-select {
				border: 1px solid #4FC48F;
				background-color: #4FC48F;
				color: #ffffff;
			}
			
		}
	}
</style>